<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mx-graph绘图</title>

</head>
<body onload="main(document.getElementById('graphContainer'))">
<div id="graphContainer">

</div>
</body>
</html>
<script type="text/javascript">
    var mxBasePath = "./mx-graph/src/";

</script>
<script src="./mx-graph/src/js/mxClient.js"></script>

<script type="text/javascript">
    // Overridden to define per-shape connection points
    // 重新定义，定义每个形状的连接点
    mxGraph.prototype.getAllConnectionConstraints = function(terminal, source)
    {
        if (terminal != null && terminal.shape != null)
        {
            if (terminal.shape.stencil != null)
            {
                if (terminal.shape.stencil.constraints != null)
                {
                    return terminal.shape.stencil.constraints;
                }
            }
            else if (terminal.shape.constraints != null)
            {
                return terminal.shape.constraints;
            }
        }

        return null;
    };

    // Defines the default constraints for all shapes
    // 定义所有形状的默认连接点
    mxShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0.25, 0), true),
        new mxConnectionConstraint(new mxPoint(0.5, 0), true),
        new mxConnectionConstraint(new mxPoint(0.75, 0), true),
        new mxConnectionConstraint(new mxPoint(0, 0.25), true),
        new mxConnectionConstraint(new mxPoint(0, 0.5), true),
        new mxConnectionConstraint(new mxPoint(0, 0.75), true),
        new mxConnectionConstraint(new mxPoint(1, 0.25), true),
        new mxConnectionConstraint(new mxPoint(1, 0.5), true),
        new mxConnectionConstraint(new mxPoint(1, 0.75), true),
        new mxConnectionConstraint(new mxPoint(0.25, 1), true),
        new mxConnectionConstraint(new mxPoint(0.5, 1), true),
        new mxConnectionConstraint(new mxPoint(0.75, 1), true)];

    function main(container){
        // 先检查浏览器是否支持

        if(!mxClient.isBrowserSupported()){
            mxUtils.error("浏览器不支持",200,false)
        }
        //  禁用右键菜单
        mxEvent.disableContextMenu(container)
        //  使用容器创建画布对象
        const graph = new mxGraph(container)
        graph.setConnectable(true);
        // 启用连接预览
        graph.connectionHandler.createEdgeState = function(me)
        {
            var edge = graph.createEdge(null, null, null, null, null);

            return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
        };


        // 指定默认的边样式
        graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = 'orthogonalEdgeStyle';
        //

        //  启用橡皮擦选中效果
        // new mxRubberband(graph)
        //  获取默认的父节点，通常为根节点的第一个子节点
        var parent = graph.getDefaultParent();
        // 开启事务，可以在一步内添加如下所有元素，如果不用事务则try块中执行一步画一个元素
        graph.getModel().beginUpdate();
        try {
            // 使用自定义图片，可以是url、相对路径、绝对路径
            var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30,"rounded;strokeColor=red;fillColor=#fff" );
            var v3 = graph.insertVertex(parent, null, 'Hello,', 200, 20, 80, 30,"rounded;strokeColor=red;fillColor=#fff" );
            // 使用内置形状
            var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30, 'shape=cloud;');
            // 连接v1和v2 连线
            var e1 = graph.insertEdge(parent, null, '', v1, v2);
            var vertexStyle = graph.getStylesheet().getDefaultVertexStyle();
            vertexStyle[mxConstants.STYLE_ROUNDED] = true;
            //开启圆角
            var edgeStyle = graph.getStylesheet().getDefaultEdgeStyle();
            edgeStyle[mxConstants.STYLE_EDGE] = mxEdgeStyle.TopToBottom
        }
        finally {
            // 结束事务，刷新画布
            graph.getModel().endUpdate();
        }


    }
</script>
<style>




</style>
